<?php
$baseUrl  = Yii::app()->baseUrl;
$tempoUrl = Yii::app()->params['tempo_url'];
$cs       = Yii::app()->getClientScript();

$cs->registerCssFile($baseUrl . '/css/jquery.jcrop.min.css');
$cs->registerScriptFile($baseUrl . '/js/jquery.jcrop.min.js', CClientScript::POS_BEGIN);
?>

<div class="productJcropWrapper" id="productJcropWrapper">
    <img src="<?php echo $baseUrl . $tempoUrl . $file . '?q=' . rand(1, 100); ?>"
         id="jcropTarget"/>
</div>

<div style="text-align: center; margin-top: 25px;">
    <input type="button" value="CROP" name=""
           class="ui-state-default ui-corner-all ui-button" id="btn-crop" />
    <input type="button" value="CANCEL" name="" style="margin:0 0 0 10px;"
           class="ui-state-default ui-corner-all ui-button" id="btn-cancel" />
</div>

<script type="text/javascript">
/*-----------------------------------------------------------------------------
Events
-----------------------------------------------------------------------------*/
var params;

$('#btn-crop').click(function(){
    parent.$('#cropImageDialog')
        .data('params', params)
        .trigger('cropImage')
        .dialog('close');
});

$('#btn-cancel').click(function(){
    parent.$('#cropImageDialog').dialog('close');
});

/*-----------------------------------------------------------------------------
Crop image
-----------------------------------------------------------------------------*/
jQuery(function($){
    var jcrop_api,
        width = '<?php echo $model->params['small']['width'] ?>',
        height = '<?php echo $model->params['small']['height'] ?>',
        maxWidth = '<?php echo $model->params['normal']['width'] ?>',
        maxHeight = '<?php echo $model->params['normal']['height'] ?>';

    $('#jcropTarget').Jcrop({
        minSize: [width, height],
        aspectRatio: width / height,
        allowSelect: false,
        onSelect: showCropParams}, function(){
            jcrop_api = this;
    });
    $('#jcropTarget').bind('load', function() {
        jcrop_api.setSelect([
            (maxWidth/2) - (width/2),
            (maxHeight/2) - (height/2),
            (maxWidth/2) + (width/2),
            (maxHeight/2) + (height/2)
        ]);
    });
});

function showCropParams(c) {
    params = c;
}
</script>